<template>
  <section>
    <info-box :width="600"
              :visible="visible"
              :top="55"
              :right="5"
              @opened="handleOpened"
              @close="handleClose"
              @closed="handleClosedDialog">
      <!--案件信息-->
      <section class="caseInfo">
        <section v-loading="detailLoading">
          <el-collapse-transition>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>巡护车辆详情</span>
              </div>
              <div class="text item">
                <template v-if="caseDetail">
                  <section class="command__detail__wrapper">
                    <section class="case__detail_container">
                      <el-row>
                        <el-col :span="12">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                车辆名称
                              </section>
                              <section class="content">{{caseDetail.title}}</section>
                            </section>
                          </section>
                        </el-col>
                        <el-col :span="12">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                车型
                              </section>
                              <section class="content">{{caseDetail.model}}</section>
                            </section>
                          </section>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                发动机号码
                              </section>
                              <section class="content">{{caseDetail.engineNumber}}</section>
                            </section>
                          </section>
                        </el-col>
                        <el-col :span="12">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                底盘号码
                              </section>
                              <section class="content">{{caseDetail.chassisNumber}}</section>
                            </section>
                          </section>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                责任人
                              </section>
                              <section class="content">{{caseDetail.cadre}}</section>
                            </section>
                          </section>
                        </el-col>
                        <el-col :span="12">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                联系方式
                              </section>
                              <section class="content">{{caseDetail.contact}}</section>
                            </section>
                          </section>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                车类型
                              </section>
                              <section class="content">{{caseDetail.type}}</section>
                            </section>
                          </section>
                        </el-col>
                        <el-col :span="12">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                使用年限
                              </section>
                              <section class="content">{{caseDetail.serviceLife}}</section>
                            </section>
                          </section>
                        </el-col>
                      </el-row>
                      <el-row>
                        <el-col :span="12">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                使用截止日期
                              </section>
                              <section class="content">{{caseDetail.useDeadline}}</section>
                            </section>
                          </section>
                        </el-col>
                        <el-col :span="12">
                          <section class="detail__item_container">
                            <section class="item_info_container">
                              <section class="item_info_container_title">
                                <div class="dian"></div>
                                终端设备名称
                              </section>
                              <section class="content">{{caseDetail.equipmentName}}</section>
                            </section>
                          </section>
                        </el-col>
                      </el-row>
                      <section class="detail__item_container">
                        <section class="item_info_container">
                          <section class="item_info_container_title">
                            <div class="dian"></div>
                            终端设备编码
                          </section>
                          <section class="content">{{caseDetail.equipmentNumber}}</section>
                        </section>
                      </section>
                    </section>
                  </section>
                </template>
              </div>
              <div class="footer">
                <el-row>
                  <el-col :span="3">
                    时间
                  </el-col>
                  <el-col :span="21">
                    <el-date-picker
                      v-model="trajectoryTime"
                      type="datetimerange"
                      align="right"
                      unlink-panels
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      :default-time="['00:00:00', '23:59:59']"
                      :picker-options="pickerOptions">
                    </el-date-picker>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="3">速率</el-col>
                  <el-col :span="6">
                    <el-select v-model="speedLabel" placeholder="请选择" @change="speedSelect">
                      <el-option
                        v-for="item in speedDates"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="3">操作</el-col>
                  <el-col :span="21">
                    <el-button type="primary" @click="startAnimation">播放</el-button>
                    <el-button type="primary" @click="pauseAnimation">暂停</el-button>
                    <el-button type="primary" @click="continueAnimation">继续</el-button>
                    <el-button type="primary" @click="stopAnimation">取消</el-button>
                    <el-button type="primary" @click="showVedio">播放历史视频</el-button>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </el-collapse-transition>
        </section>
      </section>
    </info-box>
  </section>
</template>
<script>

  import infoBox from '../components/infoBox'
  import TyPlayTrace from '../../../plugin/map/TyPlayTrace'
  import {validatenull} from '../../../utils/validate'
  import {listTrajectory} from '../../../api/basicInformation/trajectory'

  export default {
    name: 'command-case-bar',
    components: {infoBox},
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    computed: {},
    watch: {},
    mounted() {
    },
    data() {
      return {
        // 坐标点临时缓存
        markers: [],
        // 案件信息显示控制
        caseInfoVisible: false,
        // 案件框选列表显示控制
        caseSelectionVisible: false,
        // 案件基本信息
        caseDetail: {
          item: {
            model: ''
          }
        },
        // 框选的ids
        caseSelectionList: [],
        detailLoading: false,
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)
          },
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        trajectoryTime: [new Date(new Date(new Date().toLocaleDateString()).getTime()), new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)],
        trajectoryData: [],
        timer: null,
        isPosition: false,
        isLine: false,
        isGo: false,
        drawMap: [],
        playtrace: null,
        dataList: [],
        map: null,
        speedLabel: '正常',
        speedValue: '10',
        speedDates: [{
          value: '5',
          label: '缓慢'
        }, {
          value: '10',
          label: '正常'
        }, {
          value: '50',
          label: '快速'
        }, {
          value: '200',
          label: '非常快速'
        }],
        startAnimationIndex: '',
        isShowbtn: true
      }
    },
    methods: {
      handleOpened() {
      },
      speedSelect(value) {
        this.speedValue = value
      },
      handleClosedDialog() {
        if(this.drawMap.length>0){
          this.stopAnimation()
        }
      },
      handleClose() {
        if(this.drawMap.length>0){
          this.stopAnimation()
        }
        this.$emit('close')
      },
      handleShowCaseInfo(data, map) {
        this.map = map
        this.caseDetail = data.item
        this.caseInfoVisible = true
      },
      handleCloseCaseInfo(flag = false) {
        this.caseInfoVisible = flag
      },
      startAnimation() {
        const that = this
        if (this.isShowbtn) {
          this.isShowbtn = false
          if (this.trajectoryTime === '' || this.trajectoryTime === null || this.trajectoryTime === undefined) {
            this.$message({
              message: '请选择轨迹查询时间',
              type: 'error'
            })
            this.isShowbtn = true
            return false
          }
          this.$emit('updateisReadSecondShow', false)
          this.trajectoryData = []
          clearInterval(this.timer)
          this.timer = null
          this.clearTrajectory()
          const paramQuery = {
            beginDate: this.trajectoryTime[0],
            overDate: this.trajectoryTime[1],
            terminalId: this.caseDetail.terminalId,
            terminalType: '2'
          }
          listTrajectory(paramQuery)
            .then((res) => {
              if (res.code === 200) {
                const retData = res.rows
                if (JSON.stringify(retData) === '[]' || JSON.stringify(retData) === undefined) {
                  this.$message({
                    message: '车辆在该时间段没有任何轨迹数据',
                    type: 'error'
                  })
                  this.isShowbtn = true
                  return false
                }
                this.dataList = res.rows
                let playTrace = null
                let feature = null
                this.drawMap = []
                this.trajectoryData = []
                this.trajectoryData = retData
                const coordinates = []
                Object.keys(res.rows).forEach((item) => {
                  coordinates.push([res.rows[item].x, res.rows[item].y])
                })
                playTrace = new TyPlayTrace({
                  map: this.map.map,
                  routeCoords: coordinates,
                  centerPosition: coordinates[0],
                  iconUrl: '/image/car/car.png',
                  markerUrl: '/image/car/car.png'
                })
                feature = playTrace.showPlayTrace({
                  data: {
                    coordinates: coordinates
                  },
                  callback: (feature, data) => {
                  }
                })
                this.drawMap.push({
                  playTrace: playTrace,
                  feature: feature
                })
                const view = this.map.map.getView()
                view.setCenter(coordinates[0])
                view.setZoom(12)
                let $index = 0
                if (this.drawMap[$index].playTrace) {
                  if (!validatenull(this.startAnimationIndex)) {
                    this.drawMap[this.startAnimationIndex].playTrace.stopAnimation(false)
                  }
                  if (this.speedValue === '') {
                    this.speedValue = '10'
                  }
                  this.drawMap[$index].playTrace.setSpeedValue(this.speedValue)
                  this.drawMap[$index].playTrace.startAnimation({
                    beforeCallback: () => {
                      this.isShowbtn = false
                      this.startAnimationIndex = $index
                    },
                    afterCallback: () => {
                      this.isShowbtn = true
                      this.$message({
                        message: '轨迹播放完毕',
                        type: 'success'
                      })
                    }
                  })
                }
              }
            })
            .catch(() => {
              this.isShowbtn = true
              // this.tableLoading = false
            })
        }
      },
      pauseAnimation(){
        this.drawMap[0].playTrace.pauseAnimation()
      },
      continueAnimation(){
        this.drawMap[0].playTrace.continueAnimation()
      },
      stopAnimation() {
        this.isShowbtn = true
        this.drawMap[0].playTrace.stopAnimation(false)
        this.$emit('updateisReadSecondShow', true)
        // this.clearTrajectory()
      },
      clearTrajectory() {
        this.drawMap.forEach((item) => {
          if (item.feature) {
            this.map.map.removeLayer(item.feature.vectorLayer)
          }
        })
      },
      showVedio() {
        this.$message({
          message: '目前为预留项',
          type: 'warning'
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  @import '../style/main';

  .case__detail_container {
    max-height: 368px;
  }
</style>
